<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu router :default-openeds="['1']"  style="text-align: left;">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-user"></i>个人账户</template>
          <el-menu-item index="1-1"><i class="el-icon-edit"></i>基本信息修改</el-menu-item>
          <el-menu-item index="1-2"><i class="el-icon-edit"></i>密码修改</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-s-check"></i>管理员模块</template>
          <el-menu-item index="/backstage/AdminManage">管理员列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown @command="handleCommand">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>基本信息编辑</el-dropdown-item>
            <el-dropdown-item>密码修改</el-dropdown-item>
            <el-dropdown-item command="admin_logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{admin.name}}</span>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      admin:{},//管理员
    }
  },
  methods: {
    handleCommand(command) { // 处理菜单问题
      if (command == "admin_logout") { // 如果是注销
        this.$axios//通过axios组件异步加载
            .delete("/backstage/logout")
            .then(response => {//data表示服务端返回（答复）的数据，data就是答复的数据内容
              const data = response.data;
              if (data.success) {//如果加载成功
                localStorage.removeItem("token");
                this.$router.push("/");
              } else {
                alert(data.msg);
              }
            })
            .catch(error => {//网络连接失败调用
              alert("数据读取失败");
            });
      }
    },
    readSession() {//读取当前登录账户
      //异步交互
      this.$axios//通过axios组件异步加载
          .get("/backstage/admin/session")
          .then(response => {//data表示服务端返回（答复）的数据，data就是答复的数据内容
            const data = response.data;
            if (data.success) {//如果加载成功
              this.admin = data.data;//给本地的数组变量赋值，获取服务端传递过来的当前登录账户信息
            } else {
              alert(data.msg);
            }
          })
          .catch(error => {//网络连接失败调用
            alert("数据读取失败");
          });
    },
  },
  mounted() {//当页面元素加载完成之后，自动执行
    this.readSession();
  },
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>